<template>
  <view>
    <cu-custom bgColor="bg-blue" :isBack="true"
      ><block slot="content">我的发布</block></cu-custom
    >
    <view
      class="padding text-center text-gray"
      v-show="imagesPageInfo.records.length === 0"
      >您还没有发布任何内容......</view
    >
    <view class="cu-timeline bg-white">
      <!-- <view class="cu-time">06-17</view> -->
      <view
        class="cu-item"
        v-for="(item, index) in imagesPageInfo.records"
        :key="index"
      >
        <view class="content" @click="toImageDetails(item.id)">
          <view class="cu-capsule radius">
            <view class="cu-tag bg-cyan"
              ><view class="cuIcon-time"></view
            ></view>
            <view class="cu-tag line-cyan">{{ item.createTime }}</view>
          </view>
          <view
            class="cuIcon-roundclose text-red close-icon"
            @click.stop="showDelModal(item.id)"
          ></view>
          <image
            @click.stop="previewImage(item.url)"
            class="timeline-item-image"
            :src="item.url"
            mode="aspectFill"
          />
          <view class="margin-top text-cut"
            >{{ item.title }}
            <view
              v-show="item.status === '待审核'"
              class="cu-tag bg-red sm radius"
              style="margin-left: 10px"
              >待审核</view
            >
            <view
              v-show="item.status === '未通过审核'"
              class="text-red text-sm"
              style="white-space: normal;"
            >
              &#9888; 未通过审核，原因：{{ item.remark }}</view
            >
          </view>
        </view>
      </view>
    </view>
    <view class="padding text-center text-gray" v-show="showNoMore"
      >没有更多内容了哦......</view
    >
  </view>
</template>

<script>
import { checkTokenInStore } from "../../permission/index";
import { mapState } from "vuex";
import { fetchImagesApi, delImageApi } from "../../api/http";
export default {
  data() {
    return {
      imagesPageInfo: {
        current: 1,
        size: 5,
        records: [],
        total: 0,
      },
      showNoMore: false,
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo,
    }),
  },
  onLoad() {
    checkTokenInStore();
    this.refreshImages();
  },
  onPullDownRefresh() {
    this.refreshImages();
    uni.stopPullDownRefresh();
  },
  onReachBottom() {
    if (
      this.imagesPageInfo.current * this.imagesPageInfo.size >=
      this.imagesPageInfo.total
    ) {
      this.showNoMore = true;
      return;
    }
    this.fetchImages({
      page: this.imagesPageInfo.current + 1,
      limit: this.imagesPageInfo.size,
      createdBy: this.userInfo.id,
    });
  },
  methods: {
    fetchImages(param) {
      fetchImagesApi(param).then((res) => {
        const _info = res.data;
        this.imagesPageInfo.current = _info.current;
        this.imagesPageInfo.size = _info.size;
        this.imagesPageInfo.records = this.imagesPageInfo.records.concat(
          _info.records
        );
        this.imagesPageInfo.total = _info.total;
      });
    },
    showDelModal(id) {
      uni.showModal({
        title: "提示",
        content: "确定要删除这张图片吗？",
        success: (res) => {
          if (res.confirm) {
            delImageApi(id).then((res) => {
              uni.showToast({
                title: "删除成功",
              });
              this.imagesPageInfo.records = this.imagesPageInfo.records.filter(
                (item, index) => item.id != id
              );
            });
          }
        },
      });
    },
    previewImage(url) {
      uni.previewImage({
        urls: [url],
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
          success: function (data) {
            console.log(
              "选中了第" +
                (data.tapIndex + 1) +
                "个按钮,第" +
                (data.index + 1) +
                "张图片"
            );
          },
          fail: function (err) {
            console.log(err.errMsg);
          },
        },
      });
    },
    toImageDetails(id) {
      uni.navigateTo({
        url: "../image_details/image_details?id=" + id,
      });
    },
    refreshImages() {
      this.imagesPageInfo = {
        current: 1,
        size: 5,
        records: [],
        total: 0,
      };
      this.fetchImages({
        page: this.imagesPageInfo.current,
        limit: this.imagesPageInfo.size,
        createdBy: this.userInfo.id,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.timeline-item-image {
  margin-top: 20rpx;
  height: 350rpx !important;
}
.close-icon {
  position: absolute;
  top: 35rpx;
  right: 40rpx;
  font-size: 35rpx;
}
</style>
